<template>
	<view class="xsCar">
		<view class="header">
			<view class="header_title">
				<view class="header_title_back" @click="backPage()">
					<image src="@/static/xs_back@2x.png" mode=""></image>
				</view>
				<view class="header_title_tab">
					<view @click="event_clickSeachCarTitle(0)" :class="{ active_tab: currentTabIndex == 0 }">新车</view>
					<view @click="event_clickSeachCarTitle(1)" :class="{ active_tab: currentTabIndex == 1 }">寻车
					</view>
				</view>
			</view>
			<view class="header_search" @click="toSearch()" v-if="currentTabIndex == 0">
				<view class="header_search_left">
					<image src="../../../static/search.png" mode=""></image>
					<text>品牌 车系 车型 指导价</text>
				</view>
				<view class="header_search_right">搜索</view>
			</view>
			<view class="header_search" v-if="currentTabIndex == 1">
				<view class="header_search_left">
					<image src="../../../static/search.png" mode=""></image>
					<input v-model="searchData" placeholder-class="my-input-placeholder" class="search-input"
						type="text" placeholder="搜索" />
				</view>
				<view class="header_search_right" @click="searchCar">搜索</view>
			</view>
		</view>
		<template v-if="currentTabIndex === 0">
			<view class="main">
				<scroll-view id="allBrandId" scroll-y="true" class="content" :refresher-enabled="isOpenRefresh"
					:refresher-triggered="triggered" scroll-with-animation :scroll-into-view="intoViewId"
					@scroll="rightscroll" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
					@refresherrestore="onRestore" @refresherabort="onAbort">
					<view class="icon" id="icon">
						<view class="icon_item" v-for="(item, i) in iconList" :key="i"
							@click="event_clickCarType(item)">
							<view class="icon_item_left">
								<text class="item_icon_val">{{ item.title }}</text>
								<text class="item_icon_label">{{ item.brief }}</text>
							</view>
							<view class="icon_item_right">
								<image :src="item.icon_url" mode=""></image>
							</view>
						</view>
					</view>
					<view class="common" id="common" v-if="commonBrands.length">
						<view class="common_label">常用品牌</view>
						<scroll-view scroll-x="true" class="common_content" style="white-space: nowrap">
							<view class="common_main">
								<view class="common_main_item" v-for="(carType, i) in commonBrands" :key="i"
									@click="toBrandPage(carType)">
									<image :src="carType.cover_url" mode=""></image>
									<text>{{ carType.name }}</text>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="brandItem" :id="`brand${item.key}_${i}`" v-for="(item, i) in carBrandInfoList"
						:key="i">
						<view class="brandItem_label">{{ item.key }}</view>
						<view class="brandItem_main">
							<view class="brand_child" v-for="(row, j) in item.value" :key="j" @click="toBrandPage(row)">
								<view class="flex align-center justify-center"
								    style="width: 110rpx;height: 70rpx; margin-left: -20rpx;">
								  <image :src="row.cover_url" mode="heightFix" lazy-load></image>
								</view>
								 <!-- <image :src="row.cover_url" mode="heightFix" lazy-load></image> -->
								<text>{{ row.name }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
				<scroll-view scroll-y="true" class="sticyIndex" scroll-with-animation :scroll-into-view="intoSticyId">
					<view v-for="(it, i) in indexList" :class="['indexItem', sticyIndex == i && 'active_bg']"
						:id="`sticyId${it}`" @click="toBrandLocation(it, i)">{{ it }}</view>
				</scroll-view>

				<view class="back_top" v-if="scrollTop > 0" @click="toTop()">
					<image src="../../../static/back_top@2x.png" mode=""></image>
				</view>
			</view>
			<view class="footer">
				<view class="bottom-content">
					<view class="" @click="btnHandler(1)">
						<image class="bottom-content-img" src="@/static/home-select.png" mode="scaleToFill"></image>
						<view class=""> 首页 </view>
					</view>
					<view class="" @click="btnHandler(2)">
						<image style="width: 30px;height: 30px;" class="bottom-content-img" src="@/static/send_car_source_select.png" mode="scaleToFill">
						</image>
						<view class=""> 发布车源 </view>
					</view>
					<view class="" @click="btnHandler(3)">
						<image class="bottom-content-img" src="@/static/me_select.png" mode="scaleToFill"></image>
						<view class=""> 我的 </view>
					</view>
				</view>
			</view>
		</template>

		<newCarSearch ref="newCarSearch" v-if="currentTabIndex === 1" />
	</view>
</template>
<script>
	import {
		getNewCarBrandList,
		getCommonBrandsList,
		getXsNewCarIcon,
	} from "@/api/brand.js";
	import newCarSearch from "../newCarSearch/newCarSearch.vue";
	export default {
		components: {
			newCarSearch,
		},
		data() {
			return {
				indexList: [],
				carBrandInfoList: [],
				commonBrands: [],
				intoViewId: "",
				intoSticyId: "",
				sticyIndex: null,
				topList: [],
				iconList: [],
				currentTabIndex: 0,
				searchData: "",
				login: uni.getStorageSync("login") || null,
				scrollTop: 0,
				triggered: false,
				isOpenRefresh: true // 是否开启下拉
			};
		},

		onLoad() {
			let that = this;
			that._freshing = false;
			that.getXsNewCarIcon();
			// that.getCommonBrandsList();
			that.api_getNewCarBrandList();
		},
		onShow(){
			this.getCommonBrandsList();
		},
		methods: {
			// 自定义下拉刷新控件被下拉
			onPulling(e) {
				console.log("onpulling", e);
				if (e.detail.deltaY < 0) return // 防止上滑页面也触发下拉
				this.triggered = true;
			},
			// 自定义下拉刷新被触发
			onRefresh() {
				let that = this;
				if (that._freshing) return;
				that._freshing = true;
				that.getXsNewCarIcon();
				that.getCommonBrandsList();
				that.api_getNewCarBrandList();
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
					// this.getData();
				}, 500);
			},
			// 自定义下拉刷新被复位
			onRestore() {
				this.triggered = 'restore'; // 需要重置
				console.error("onRestore");
			},
			// 自定义下拉刷新被中止
			onAbort() {
				console.error("onAbort");
			},
			toSearch() {
				uni.navigateTo({
					url: "/main/home/xsSearch/xsSearch",
				});
			},

			backPage() {
				uni.navigateBack({
					delta: 1,
				});
			},
			searchCar() {
				this.$refs.newCarSearch.event_clickSearchBtn(this.searchData);
			},
			searchCarBackData(item) {
				this.$refs.newCarSearch.backData(item);
			},
			refreshSearchCar() {
				this.$refs.newCarSearch.init();
			},
			// 点击——寻车
			event_clickSeachCarTitle: function(index) {
				this.currentTabIndex = index;
			},

			toTop() {
				let that = this;
				that.intoViewId = "icon";
				setTimeout(() => {
					that.sticyIndex = null;
				}, 100);


			},

			/* 初始化滚动区域 */
			initScrollView() {
				let that = this;
				let view = uni.createSelectorQuery().select("#allBrandId");
				view
					.boundingClientRect((res) => {
						console.log("res", res);
						if (res) {
							this.scrollTopSize = res.top;
							this.scrollHeight = res.height;
						}
					})
					.exec();
			},
			// 获取右侧滑动区域每一个子区域的高度
			getTop() {
				console.log("eeee");
				const query = uni.createSelectorQuery().in(this);
				query
					.selectAll(".brandItem")
					.boundingClientRect((res) => {
						if (res) {
							let topArr = res.map((item) => {
								return (
									item.top - this.scrollTopSize
								); /* 减去滚动容器距离顶部的距离 */
							});
							this.topList = topArr;
							/* 获取最后一项的高度，设置填充高度。判断和填充时做了 +-20 的操作，是为了滚动时更好的定位 */
							if (res.length > 0) {
								let last = res[res.length - 1].height;
								if (last - 10 < this.scrollHeight) {
									this.fillHeight = this.scrollHeight - last;
								}
							}
						}
						console.log(this.topList);
					})
					.exec();
			},
			//右侧滑动区域的滑动事件
			rightscroll(event) {
				console.log('event', event)
				let that = this;
				// 节流方法
				clearTimeout(that.mainThrottle);
				that.mainThrottle = setTimeout(() => {
					scrollFn();
				}, 10);
				let scrollFn = () => {
					let top = event.detail.scrollTop;
					let index = 0;
					that.scrollTop = event.detail.scrollTop;
					this.topList.forEach((item, id) => {
						if (top + 2 >= item) {
							index = id;
							that.sticyIndex = index < 0 ? 0 : index;
						}
					});
					that.intoViewId = ''
				};
			},

			toBrandLocation(it, index) {
				this.sticyIndex = index;
				this.intoViewId = `brand${it}_${index}`;
			},

			getCommonBrandsList() {
				getCommonBrandsList(`${this.login.id}`, 30).then((res) => {
					this.commonBrands = res.data;
					console.log("commonBrands===", this.commonBrands);
				});
			},

			api_getNewCarBrandList() {
				let that = this;
				getNewCarBrandList().then((res) => {
					this.indexList = res.data.map((item) => item.key);
					this.carBrandInfoList = res.data;
					setTimeout(() => {
						that.initScrollView();
						that.getTop();
					}, 100);
					console.log("this.carBrandInfoList==", this.carBrandInfoList);
					this.$forceUpdate();
				});
			},
			getXsNewCarIcon() {
				let that = this;
				getXsNewCarIcon().then((res) => {
					console.log("icon", res);
					that.iconList = res.data || [];
				});
			},

			toBrandPage(row) {
				uni.navigateTo({
					url: "/pages/home/newCar/carSeries?id=" + row.id,
				});

			},

			// 点击——各个车型
			event_clickCarType: function(row) {
				this.$utils.log("点击车型" + row.state);
				switch (row.state) {
					case 1:
						uni.navigateTo({
							url: "/newEnergy/newEnergyVehicle/newEnergyVehicle",
						});
						// this.$utils.log("新能源车")
						break;
					case 2:
						uni.navigateTo({
							url: "/newEnergy/parallelImportCar/parallelImportCar",
						});
						this.$utils.log("平行进口车");
						break;
					case 3:
						this.$utils.log("商务改装车");
						uni.navigateTo({
							url: "/pages/business/business",
						});
						break;
					case 4:
						uni.navigateTo({
							url: "/main/discountCar/discountCar",
						});
						this.$utils.log("特惠折扣车22");
						break;
					default:
						break;
				}
			},

			btnHandler: function(num) {
				switch (num) {
					case 1:
						uni.reLaunch({
							url: "/main/home/index/index",
						});
						break;
					case 2:
						uni.navigateTo({
							url: "/main/carSourceList/releaseCar",
						});
						break;
					case 3:
						console.log("我的");
						uni.reLaunch({
							url: "/main/user/me/me",
						});
						break;
				}
			},
		},
	};
</script>
<style>
	page{
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.search-input {
		margin-left: 14rpx;
	}

	.xsCar {
		width: 100vw;
		min-height: 100vh;
		background: #f7f8fa;
		height: 100%;
		overflow-y: hidden;
		.header {
			width: 100vw;
			padding-top: 100rpx;
			height: 246rpx;
			background: #2d56c5;

			&_title {
				width: 100vw;
				height: 34rpx;
				display: flex;
				align-items: center;

				&_back {
					padding-left: 28rpx;
					width: 70rpx;
					height: 70rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					image {
						width: 18rpx;
						height: 34rpx;
					}
				}

				&_tab {
					display: flex;
					align-items: center;
					margin-left: 215rpx;

					view {
						font-size: 36rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: rgba(255, 255, 255, 0.5);
						margin: 0 22rpx;
					}

					.active_tab {
						color: #ffffff;
					}
				}
			}

			&_search {
				width: 686rpx;
				height: 60rpx;
				background: #ffffff;
				border-radius: 30rpx;
				padding: 4rpx;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 38rpx;

				&_left {
					display: flex;
					align-items: center;
					padding-left: 22rpx;

					image {
						width: 30rpx;
						height: 30rpx;
					}

					text {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #999999;
						margin-left: 14rpx;
					}
				}

				&_right {
					width: 112rpx;
					height: 52rpx;
					background: #0e59ea;
					border-radius: 26rpx;
					text-align: center;
					line-height: 52rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;
					text-align: center;
					line-height: 52rpx;
				}
			}
		}

		.main {
			width: 100vw;
			position: relative;
			display: flex;

			.content {
				height: calc(100vh - 375rpx - env(safe-area-inset-bottom));
				width: 694rpx;
				margin: 0 auto;

				.icon {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					gap: 14rpx 0;
					margin-top: 26rpx;

					&_item {
						width: 340rpx;
						height: 124rpx;
						padding: 28rpx 50rpx 28rpx 30rpx;
						background: #ffffff;
						border-radius: 12rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						&_left {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: flex-start;

							.item_icon_val {
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: bold;
								color: #000000;
							}

							.item_icon_label {
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #666666;
								margin-top: 18rpx;
							}
						}

						&_right {
							width: 58rpx;
							height: 58rpx;

							image {
								width: 58rpx;
								height: 58rpx;
							}
						}
					}
				}

				.common {
					width: 694rpx;
					height: 242rpx;
					background: #ffffff;
					border-radius: 14rpx;
					padding: 30rpx 20rpx;
					margin-top: 20rpx;

					&_label {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 800;
						color: #05052a;
						position: relative;
					}

					&_label::after {
						content: "";
						display: block;
						position: absolute;
						width: 90rpx;
						height: 33rpx;
						background: rgba(96, 152, 253, 0.3);
						border-radius: 50%;
						transform: scale(1, 0.4);
						bottom: -11rpx;
						left: 27rpx;
					}

					&_content {
						margin-top: 48rpx;
						width: 654rpx;

						.common_main {
							width: 654rpx;
							display: flex;
							align-items: center;
							gap: 0 30rpx;

							&_item {
								width: 100rpx;
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: center;
								// margin-left: 30rpx;

								image {
									width: 48rpx;
									height: 48rpx;
									border-radius: 50%;
								}

								text {
									width: 100rpx;
									text-overflow: ellipsis;
									overflow: hidden;
									white-space: nowrap;
									text-align: center;
									font-size: 28rpx;
									font-family: PingFang SC;
									font-weight: bold;
									color: #000000;
									margin-top: 16rpx;
								}
							}
						}
					}
				}

				.brandItem {
					&_label {
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 800;
						color: #333333;
						padding: 20rpx 0 20rpx 19rpx;
					}

					&_main {
						background: #ffffff;
						border-radius: 14rpx;

						.brand_child {
							padding: 30rpx 0 30rpx 20rpx;
							display: flex;
							align-items: center;
							justify-content: flex-start;

							image {
								height: 52rpx;
							}

							text {
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 800;
								color: #333333;
								margin-left: 11rpx;
							}
						}
					}
				}
			}

			.sticyIndex {
				position: fixed;
				
				// width: 11rpx;
				width: 40rpx;
				top: calc(280rpx + env(safe-area-inset-bottom));
				right: 20rpx;
				height: calc(100vh - 520rpx - env(safe-area-inset-bottom));

				.indexItem {
					width: 35rpx;
					height: 35rpx;
					border-radius: 50%;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					text-align: center;
					line-height: 35rpx;
					margin-bottom: 2rpx;
				}

				.active_bg {
					width: 35rpx;
					height: 35rpx;
					border-radius: 50%;
					background: #2979ff;
					color: #ffffff;
					text-align: center;
					line-height: 35rpx;
				}
			}

			.back_top {
				position: absolute;
				bottom: calc(20rpx + env(safe-area-inset-bottom));
				right: 0;
				width: 88rpx;
				height: 88rpx;
				z-index: 99;

				image {
					width: 88rpx;
					height: 88rpx;
				}
			}
		}

		.footer {
			width: 100vw;
			position: fixed;
			bottom: 0;
			background-color: #ffffff;
			padding-bottom: env(safe-area-inset-bottom);

			.bottom-content {
				height: 125rpx;
				width: 100%;
				box-shadow: 0rpx -2rpx 4rpx 0rpx rgba(204, 204, 204, 0.4);
				display: flex;
				justify-content: space-around;
				align-items: center;
				text-align: center;

				.bottom-content-img {
					width: 25px;
					height: 25px;
				}
			}
		}
	}
</style>
<style>
	.my-input-placeholder {
		color: #999;
	}
</style>